<template>
	<view class="root-box">
		<view class="content">
			<z-paging ref="paging" v-model="dataList" @query="queryList" :defaultPageSize="selfPageSize">
				<template v-slot:top>
					<uv-navbar placeholder title="订单列表" @leftClick="goBack" bgColor="#ffffff" />
					<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change" sliderBgColor="red"
						selectedColor="red" :size="24"></tui-tabs>
				</template>
				<view style="padding: 0 30rpx; box-sizing: border-box;">
					<view class="loop-item" @click.stop="goDetails(item.id)" v-for="(item,index) in dataList" :key="item.id">
						<view class="loop-item-header">
							<view class="font-small"><text>订单号:</text><text class="order-on">{{item.order_no}}</text>
							</view>
							<view class="lable-box">{{item.service_time}}</view>
						</view>
						<view class="loop-body">
							<view class="loop-body-left">
								<image class="full-image" :src="item.product_image" mode="scaleToFill"></image>
							</view>
							<view class="loop-body-right">
								<view class="loop-body-item">
									<view class="lltem-title">{{item.product_name}}</view>
									<view class="lltem-money">￥{{item.total_price}}</view>
								</view>
								<view class="loop-body-item">
									<view class="font-small"><text>{{item.spec_values}}</text></view>
									<view class="font-small"><text>x{{item.num}}</text></view>
								</view>
							</view>
						</view>
						<view class="loop-footer">
							<view class="footer-icon"><uv-icon name="map" color="red" size="18"></uv-icon></view>
							<view class="footer-text-box">
								{{item.address_address}}
							</view>
						</view>
						<view class="loop-footer">
							<view class="footer-icon"><uv-icon name="clock" color="red" size="16"></uv-icon></view>
							<view class="font-small pl-20">
								{{item.service_time_desc}}
							</view>
						</view>
						<view class="loop-footer">
							<view class="footer-icon"><uv-icon name="chat" color="red" size="18"></uv-icon></view>
							<view class="font-small pl-20">
								{{item.remark}}
							</view>
							<view class="lable-box ml-20">注意</view>
						</view>

						<view class="mt-20"><uv-divider></uv-divider></view>



						<view class="bt-box" v-if="item.takes_order_status==1">
							<view class="bt-item-box" @click.stop="onConfirm(item)">
								<view class="bt-item-3">确定</view>
							</view>
						</view>

						<view class="action-box" v-if="item.takes_order_status==2">
							<view class="icon-box" @click.stop="onOpenMap(item)">
								<view><tui-icon custom-prefix="lishitong" name="lishitong-dingwei" size="20"
										color="#111"></tui-icon></view>
								<view class="icon-title">导航</view>
							</view>
							<view class="icon-fix"></view>
							<view class="icon-box" @click.stop="makeCall(item.address_tel)">
								<view><tui-icon custom-prefix="lishitong" name="lishitong-dianhua" size="20"
										color="#111"></tui-icon></view>
								<view class="icon-title">联系客户</view>
							</view>
							<view class="bt-action-box" @click.stop="onPostStartServer(item)">
								<view class="bt-action-item">上报位置开始服务</view>
							</view>
						</view>

						<view class="bt-box" v-if="item.takes_order_status==3">
							<view class="bt-item-box">
								<!-- <view class="bt-item-1-box">
									<view class="bt-item-1" @click.stop="onUploadPic">
										<tui-icon custom-prefix="lishitong" name="lishitong-paizhao" size="20"
											color="#111"></tui-icon>
										<text class="ml-20">上传照片</text>
									</view>
								</view> -->
								
								<view class="bt-item-2 ml-20" @click.stop="onEndServer(item)">完成任务</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>

		<uv-popup ref="uvPopupServerTip" round="10" :closeOnClickOverlay="false">
			<serverErrorTip @closeSelfPopup="onCloseServerTipPopup" @confirmReach="onConfirmReach"
				:orderId="selfOrderId" :address="selfOrderAddress" />
		</uv-popup>

		<uv-popup ref="uvPopupServerRecordTip" round="10" :closeOnClickOverlay="false" :closeable="true"
			closeIconPos="top-right" @change="serverRecordTipChange">
			<serverRecordTip />
		</uv-popup>

		<uv-popup ref="uvPopupServerEndTip" round="10" :closeOnClickOverlay="false" :closeable="true"
			closeIconPos="top-right">
			<serverEndTip @closeSelfAndUpload="onCloseSelfAndUpload" :orderId="selfOrderId" />
		</uv-popup>

		<skilledNavbar :tabValue="tabValue"></skilledNavbar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	import MapNavigator from '@/util/MapNavigator';

	import {
		technicianProfileOrderList,
		technicianConfirmNewTask,
		technicianConfirmReportLocation
	} from '@/api/other.js'

	import {
		navigate
	} from '@/util/tools.js';
	import { useCustomBack } from '@/components/useCustomBack.js'

	import serverErrorTip from './components/server_error_tip.vue'
	import serverRecordTip from './components/server_record_tip.vue'
	import serverEndTip from './components/server_end_tip.vue'
	import skilledNavbar from './components/skilled_navbar.vue'
	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'

	const currentTab = ref(0)
	const tabValue = ref(1)
	const tabs = ([{
		name: "新任务"
	}, {
		name: "待任务"
	}, {
		name: "服务中"
	}, {
		name: "已完成",

	}, {
		name: "取消/售后"
	}])



	const paging = ref(null)
	const selfPageSize = ref(10)
	const dataList = ref([])

	const selfOrderId = ref(0)
	const selfOrderAddress = ref('')
	const uvPopupServerEndTip = ref(null)
	const uvPopupServerRecordTip = ref(null)
	const uvPopupServerTip = ref(null)
	
	const { goBack } = useCustomBack('/pages-user/select_Identity')

	const queryList = (pageNo, pageSize) => {
		let orderType = currentTab.value + 1
		technicianProfileOrderList({
			page: pageNo,
			limit: pageSize,
			type: orderType
		}).then(res => {
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	const makeCall = (tel) => {
		if(!tel){
			uni.$uv.toast('拨打失败')
			return false;
		}
		
		uni.makePhoneCall({
		  phoneNumber: tel, // 要拨打的电话号码
		  success: function () {
		    console.log('成功发起通话');
		  },
		  fail: function (err) {
		    console.error('打电话失败', err);
		    // 常见错误：用户拒绝授权、号码格式错误、设备不支持等
		    uni.showToast({
		      title: '拨号失败',
		      icon: 'none'
		    });
		  }
		});
		
	}

	const onOpenMap = (obj) => {
		const navigator = new MapNavigator(obj.address_address, obj.address_lat, obj.address_lng, obj.address_address);
		navigator.navigateToMap();
	}
	
    //判断技工当前位置是否符合订单位置
    const isAtOrderLocal=(item)=>{
		return false;
	}

	const onCloseServerTipPopup = () => {
		uvPopupServerTip.value?.close()
	}

	const onConfirmReach = (order_id) => {
		uvPopupServerTip.value?.close()
		onUpLocal(order_id)
	}

	//关闭提示弹窗去上传图片
	const onCloseSelfAndUpload = (order_id) => {
		uvPopupServerEndTip.value?.close()
		navigate('/pages-skilled/order_upload?id=' + order_id)
	}

	//确定订单
	const onActionNewTask = async (order_id) => {
		const res = await technicianConfirmNewTask({
			order_id
		})
		if (res.code == 200) {
			// let url='/pages-public/operation_result?status=success&title=确认订单&desc=您已确认订单，请尽快为用户提供优质的服务'
			// navigate(url)
			uni.$uv.toast('确认订单成功')
			paging.value?.reload()
		} else {
			uni.$uv.toast('操作发生错误')
		}
	}
	//上报位置开始服务
	const onUpLocal = async (order_id) => {
		const res = await technicianConfirmReportLocation({
			order_id
		})
		if (res.code == 200) {
			// let url='/pages-public/operation_result?status=success&title=上报位置&desc=您已上报位置，可以开始服务'
			// navigate(url)
			uni.$uv.toast('上报位置成功')
			paging.value?.reload()
		} else {
			uni.$uv.toast('操作发生错误')
		}
	}
	
	
	
	const onConfirm = (item) => {
		onActionNewTask(item.id)
	}

	//打开上报位置弹窗
	const onPostStartServer = (item) => {
		selfOrderId.value = item.id
		selfOrderAddress.value = item.address_address
		let isAtOrderLocalVal = isAtOrderLocal(item)
		if(isAtOrderLocalVal){
			uvPopupServerRecordTip.value?.open('center')
		}else{
			uvPopupServerTip.value?.open('center')
		}
	}
	
	//监听上报位置弹窗开关
	const serverRecordTipChange = (e) => {
		if (!e.show) {
			onUpLocal(selfOrderId.value)
		}
	}
	//打开完成订单弹窗
	const onEndServer = (item) => {
		selfOrderId.value = item.id
		selfOrderAddress.value = item.address_address
		uvPopupServerEndTip.value?.open('center')
	}
	//去上传图片
	const onUploadPic = () => {
		navigate('/pages-skilled/order_upload')
	}

	//订单状态条件改变
	const change = (e) => {
		currentTab.value = e.index
		paging.value?.reload()

	}
	//获取订单详情
	const goDetails = (id) => {
		navigate('/pages-skilled/order_details?id=' + id)
	}
	onShow(() => {
		paging.value?.reload()
	});
</script>
<style>

</style>
<style lang="scss" scoped>
	.root-box {
		background-color: #efefef;
		min-height: 100vh;
		padding-top: 10upx;

		.content {
			padding: 0 30rpx;
			box-sizing: border-box;

		}
	}

	.uv-nav-slot {
		display: flex;
		align-items: center;

	}

	.nav-title {
		margin-left: 30upx;
		display: flex;
		align-items: center;
	}

	.city-name {
		margin-left: 10upx;
	}

	.plan-box {
		box-sizing: border-box;
		border-radius: 20upx;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx #cccccc;
		width: 100%;
		height: 150upx;

	}

	.list-title {
		font-size: 32upx;
		font-weight: 600;
		margin-top: 20upx;
		color: #333;
	}

	.loop-item {
		margin-top: 20upx;
		box-sizing: border-box;
		padding: 20upx;
		border-radius: 15upx;
		background-color: #fff;
		width: 100%;
	}

	.loop-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
	}

	.font-small {
		font-size: 20upx;
		color: #666;
	}

	.lable-box {
		border-radius: 8upx;
		background-color: #ffd6da;
		padding: 0 10upx;
		color: red;
		font-size: 15upx;
		line-height: 32upx;
	}

	.order-on {
		margin-left: 10upx;
	}

	.loop-body {
		margin-top: 15upx;
		display: flex;
	}

	.loop-body-left {
		width: 120upx;
		height: 120upx;
		background-color: #cccccc;
	}

	.loop-body-right {
		flex: 1;
		margin-left: 20upx;
	}

	.loop-body-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		margin-top: 10upx;
	}

	.lltem-title {
		color: #333;
		font-size: 28upx;
		font-weight: 600;
	}

	.lltem-money {
		color: red;
		font-size: 28upx;
	}

	.loop-footer {
		margin-top: 10upx;
		display: flex;
		align-items: center;

	}

	.footer-text-box {
		padding-left: 20upx;
		font-size: 24upx;
		color: #333;
		font-weight: 500;
	}

	.bt-box {
		display: flex;
		padding: 20upx;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}

	.bt-item-box {
		display: flex;
		flex:1;
		align-items: center;
	}



	.bt-item-3 {
		width: 600upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 10upx;
		font-size: 24upx;
	}



	.action-box {
		display: flex;
		background-color: #efefef;
		border-radius: 15upx;
		align-items: center;
		padding: 10upx;
		box-sizing: border-box;
	}

	.icon-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10upx 30upx;
	}

	.icon-title {
		font-size: 20upx;
		color: #333;
	}

	.icon-fix {
		width: 2upx;
		height: 60upx;
		border-right: 1px solid #aaa;
	}

	.bt-action-box {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.bt-action-item {
		width: 340upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 10upx;
		font-size: 24upx;

	}

	.bt-item-1-box {
		width: 300upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #efefef;
		color: #333;
		border-radius: 10upx;
		font-size: 24upx;
	}

	.bt-item-1 {
		display: flex;
		align-items: center;
	}

	.bt-item-2 {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 10upx;
		font-size: 24upx;
	}
</style>